<!--  -->
<template>
  <div>
    <router-view />
    <div>
     <el-form :inline="true" :model="params" class="form-inline">
   
      <el-form-item label="老师">
       
      <el-select
      style="width:200px"
        v-model="params.teacherid"
        placeholder="请选择老师"
        clearable
      >
        <el-option v-for="item in state.teacherList" :key="id" :label="item.name" :value="item.id" />
        
      </el-select>
    </el-form-item>

    <el-form-item label="关键字">
      <el-input v-model="params.key" placeholder="请输入关键字" clearable />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="onSearch">搜索</el-button>
    </el-form-item>
  </el-form>  
    </div>
    <div>

      <el-table :data="state.tableData" style="width:100%">
        <el-table-column  prop="id" label="ID"  width="60" />
    <el-table-column   prop="name" label="课程名称" />
    <el-table-column prop="teachername" label="老师" width="120" />
    <el-table-column  label="上课时间" width="220" >

      <template #default="scope">
         {{timeFormat(scope.row.courseStartTime)}}
      </template>
    </el-table-column>
   
    <el-table-column fixed="right" label="操作" width="220">
      <template #default="scope">
        <el-button  type="primary" size="small" @click="handleDel(scope.row.id)"
          >删除</el-button
        >
        <el-button  type="primary"  @click="handleEdit(scope.row.id)" size="small">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
    <div class="pages">
      <el-pagination
      v-model:current-page="params.page"
      v-model:page-size="params.psize"
      :page-sizes="[10,100, 200, 300, 400]"
      background
      small
      layout="total, sizes, prev, pager, next, jumper"
      :total="state.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
 

  </div>
</template>

<script lang='ts' setup>

import { reactive,toRefs,ref,onMounted} from 'vue'
import {CourseParams} from '../services/courses/type'
import {getList} from '../services/courses/courses'
import {getList as getTeacherList} from '../services/teachers/teachers'
import { useRouter } from 'vue-router'
import moment from 'moment'
const router=useRouter();
 const params = reactive<CourseParams>({
  key:"",
    teacherid:null,
    type:null,
    state:null,
    startdate:"",
    enddate:"",
    page:1,
    psize:10
 });

 const timeFormat=(str:string)=>{

 return moment(str).format("YYYY年MM月DD日 HH:mm");

 }

 const onSearch=()=>{

  params.page=1;
  getData();

 }
  const state = reactive({
    total:0,
    tableData:[],
    teacherList:[]
  })

  const handleSizeChange = (val: number) => {
  params.psize=val;
  getData();
  
}
const handleCurrentChange = (val: number) => {
  params.page=val;
  getData();
}
  // const {tableData} =toRefs(state);

 const getData=async ()=>{
  const res=await getList(params);
  console.log('11111',res);
  if(res.errCode===10000){
    state.tableData=res.data.list;
    state.total=res.data.counts;
  }
  

 }
 //获取老师信息

 const getteachers=async ()=>{

  const res=await getTeacherList({page:1,psize:1000});
  if(res.errCode===10000){
    state.teacherList=res.data.list;
   
  }
  

 }


 //删除
 const handleDel=(id:number)=>{

  alert(id);

 }
 const handleEdit=(id:number)=>{

  router.push("/coursesadd?id="+id);
 }

 

 onMounted(() => {
  getData();
  getteachers();
 })


</script>
<style scoped>
.box{
  width:100;
   
}
.form-inline{
  margin:20px
}
.pages{
  display:flex;
  justify-content: center;
        align-items: center;
        margin:30px 0px;
  
}
</style>